<template>
	<view class="flex-col page">
		<view class="flex-col flex-auto group_2 space-y-332">
			<view class="flex-col">
				<!-- class_status: 课务状态 1已上课 2请假 3 未上课 -->
				<!-- is_appointment: 是否约课 1 未约课 2 已约课 -->
				<!-- <view style="color: #EB4751;" v-if="item.status == 3 && item.is_appointment == 1">未约课</view> -->
				<!-- <view style="color: #EB4751;" v-if="item.status == 2">请假</view> -->
				<!-- <view style="color: #EB4751;" v-if="item.status == 3 && item.is_appointment == 2">未上课</view> -->
				<!-- <view style="color: #999;" v-if="item.status == 1">已上课</view> -->
				<view class="flex-col section">
					<view class="flex-row justify-between items-center group_3">
						<text class="font_1 text_3">{{info.class_hour_name}}</text>
						<text class="font_2 text_4" v-if="info.class_status == 3 && info.is_appointment == 1">未约课</text>
						<text class="font_2 text_4" v-if="info.class_status == 2">请假</text>
						<text class="font_2 text_4" v-if="info.class_status == 3 && info.is_appointment == 2">未上课</text>
						<text class="font_2 text_4" style="color: #999;" v-if="info.class_status == 1">已上课</text>
					</view>
					<view class="flex-col justify-start items-center self-start text-wrapper" v-if="info.is_appointment == 2">
						<text class="font_3 text_5">时长 {{timesdata}}</text>
					</view>
					<view class="flex-row items-center group_4 space-x-11">
						<image class="image_6"
							:src="info.coach_avatar" />
						<text class="font_3 text_6">{{info.coach_name}}</text>
						<text style="margin-left: 47%;font-size:24rpx ;color: #333333;">{{info.record_date}} {{info.start_time}}-{{info.end_time}}</text>
					</view>
				</view>
				<view class="flex-col group_5">
					<view class="flex-col section_2 space-y-29">
						<text class="self-start font_2 text_7">预约进度</text>
						<view class="flex-row justify-center items-center section_3 space-x-11">
							<view class="flex-col justify-start items-center text-wrapper_2">
								<text class="text_8" v-if="info.is_appointment == 2">已预约</text>
								<text class="text_8" v-if="info.is_appointment == 1">待预约</text>
							</view>
							<text class="font_2" style="margin-top: 6rpx;"  v-if="info.is_appointment == 2">{{info.sign_in}}</text>
						</view>
					</view>
					<view class="flex-col list space-y-30">
						<view class="flex-col list-item space-y-30">
							<text class="self-start font_2 text_9">教学目标</text>
							<view class="flex-col justify-start section_4">
								<view class="group_6">
									<text class="font_4">{{info.train_content}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="flex-col list space-y-30">
						<view class="flex-col list-item space-y-30">
							<text class="self-start font_2 text_9">教学内容</text>
							<view class="flex-col justify-start section_4">
								<view class="group_6">
									<text class="font_4">{{info.learn_obj}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="flex-col justify-start items-end section_5">
				<view class="flex-col justify-start items-center button"><text class="font_1 text_11">取消预约</text></view>
			</view> -->
			<view class="flex-col justify-start items-end section_6" v-if="info.is_appointment == 1" @click="yuyuelist()">
				<view class="flex-col justify-start items-center button"><text class="font_1 text_11">立即预约</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	// <!-- train_enum_id == 1  短训培训班-->
	// <!-- train_enum_id == 2 长训-->
	// <!-- train_enum_id == 3 小班 约课-->
	// class_mode_id = 2 是约课模式
	// is_appointment      1 未约课 2 已约课
	// status课务状态 1已上课 2请假 3 未上课
	const index = require("@/api/personal/index.js");
	export default {
		data() {
			return {
				assetsPath: this.$https.assetsPath,
				info:{},
				train_item_id:'',
				timesdata:''
			}
		},
		onLoad(options) {
			console.log(options)
			this.train_item_id = options.train_item_id
			this.hour_info(options.id)
		},
		methods: {
			yuyuelist() {
				uni.navigateTo({
					url: './appointment?train_item_id=' + this.train_item_id + '&coach_name=' + this.info.coach_name + '&class_hour_name=' + this.info.class_hour_name + '&coach_id=' + this.info.coach_id + '&class_record_id=' + this.info.id  + '&student_name=' + this.info.student_name ,
				})
			},
			// 课包-课时详情
			async hour_info(id) {
				let postData = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					open_id:uni.getStorageSync('openid'),
					id:id
				}
				let res = await index.hour_info(postData)
				if (res.code === 1) {
					this.info = res.data.info
					let sale_end = res.data.info.end_time.substring(0,2)
					let time_end = res.data.info.end_time.substring(3,5)
					let sale_start = res.data.info.start_time.substring(0,2)
					let time_start = res.data.info.start_time.substring(3,5)
					let times = parseInt(sale_end)*60+parseInt(time_end)-parseInt(sale_start)*60-parseInt(time_start)
					let hour=parseInt(times/60) 
					let min=times-hour*60
					this.timesdata = hour+'小时'+min+'分钟'
				}
			},
		}

	}
</script>

<style lang='scss'>
	@import '../../../static/css/common/common.scss';

	.page {
		background-color: #f3f3f3;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;

		.group_2 {
			overflow-y: auto;

			.section {
				padding-left: 30rpx;
				padding-right: 27rpx;
				background-color: #ffffff;

				.group_3 {
					padding: 26rpx 0 30rpx;

					.text_3 {
						color: #333333;
					}

					.text_4 {
						color: #04b35a;
						font-weight: 500;
					}
				}

				.text-wrapper {
					padding: 10rpx 0;
					background-color: #ff8f051a;
					border-radius: 20.5rpx;
					width: 230rpx;

					.text_5 {
						color: #ff8f05;
						line-height: 22rpx;
						text-align: center;
					}
				}

				.group_4 {
					padding: 30rpx 0;

					.image_6 {
						border-radius: 50%;
						width: 40rpx;
						height: 40rpx;
					}

					.text_6 {
						color: #333333;
						line-height: 37rpx;
					}
				}

				.font_3 {
					font-size: 24rpx;
					font-family: PingFang SC;
					line-height: 23rpx;
					font-weight: 500;
				}
			}

			.group_5 {
				padding: 30rpx 30rpx 0;

				.section_2 {
					padding-top: 30rpx;
					background-color: #f9f9f9;
					border-radius: 20rpx;

					.text_7 {
						margin-left: 31rpx;
						line-height: 28rpx;
					}

					.section_3 {
						padding: 38rpx 105rpx;
						background-color: #ffffff;
						border-radius: 20rpx;

						.text-wrapper_2 {
							padding: 7rpx 0;
							background-color: #ff4105;
							border-radius: 19rpx;
							width: 109rpx;
							height: 38rpx;

							.text_8 {
								color: #ffffff;
								font-size: 26rpx;
								font-family: PingFang SC;
								font-weight: 500;
								line-height: 24rpx;
								text-align: center;
							}
						}
					}
				}

				.space-y-29 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-top: 29rpx;
					}
				}

				.list {
					padding-top: 30rpx;

					.list-item {
						padding-top: 28rpx;
						background-color: #f9f9f9;
						border-radius: 20rpx;

						.text_9 {
							margin-left: 31rpx;
						}

						.section_4 {
							padding: 25rpx 0;
							background-color: #ffffff;
							border-radius: 20rpx;

							.group_6 {
								margin-left: 31rpx;
								margin-right: 10rpx;
								line-height: 34rpx;

								.font_4 {
									font-size: 26rpx;
									font-family: PingFang SC;
									letter-spacing: 1.04rpx;
									line-height: 34rpx;
									color: #666666;
								}
							}
						}
					}
				}

				.space-y-30 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-top: 30rpx;
					}
				}
			}

			.font_2 {
				font-size: 28rpx;
				font-family: PingFang SC;
				line-height: 27rpx;
				font-weight: 700;
				color: #333333;
			}

			.space-x-11 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-left: 11rpx;
				}
			}

			.section_5 {
				padding: 20rpx 0;
				background-color: #ffffff;
				
				
				.button {
					padding: 30rpx 0;
					background-color: #dcdcdc;
					border-radius: 45rpx;
					width: 209rpx;
					text-align: center;
					margin-left: 70%;
					
					.text_11 {
						color: #ffffff;
					}
				}
			}
			.section_6 {
				padding: 20rpx 0;
				/* background-color: #ffffff; */
				
				
				.button {
					padding: 30rpx 0;
					background-color: #dcdcdc;
					background-image: linear-gradient(0deg, #2f75fa 0%, #528eff 100%);
					border-radius: 45rpx;
					width: 209rpx;
					text-align: center;
					/* margin-left: 70%; */
					
					.text_11 {
						color: #ffffff;
					}
				}
			}

			.font_1 {
				font-size: 30rpx;
				font-family: PingFang SC;
				line-height: 29rpx;
				font-weight: 700;
			}
		}

		.space-y-332 {

			&>view:not(:first-child),
			&>text:not(:first-child),
			&>image:not(:first-child) {
				position: absolute;
				bottom: 20rpx;
				right: 20rpx;
			}
		}
	}
</style>
